<template>
  <ul class='border-top'>
    <li
      v-for='nav in navs'
      :key='nav.id'
      :class='nav.order'
    >
      <router-link :to='nav.path' active-class="active">
        <i class='iconfont' :class='nav.icon'></i>
        {{nav.title}}
      </router-link>
    </li>
    <li class='three'>
      <a @click='toZixun'>
        <i class='iconfont icon-zan'></i>
        资讯
      </a>
    </li>
  </ul>
</template>

<script>
export default {
  methods: {
    toZixun() {
      location.href = 'https://m.maizuo.com/mz-act/active/ElzMZU125260'
    }
  },
  data() {
    return {
      navs: [
        { id: 1, order: 'one', title: '电影', path: '/films', icon: 'icon-dianying' },
        { id: 2, order: 'two', title: '影院', path: '/cinema', icon: 'icon-yingyuan' },
        { id: 3, order: 'four', title: '我的', path: '/center', icon: 'icon-My' }
      ]
    }
  }
}
</script>

<style scoped lang='scss'>
  .one{
    order:1;
  }
  .two{
    order:2;
  }
  .three{
    order:3
  }
  .four{
    order:4
  }
  ul{
    // border-top:1px solid #ededed;
    padding-top: .08rem;
    position: fixed;
    width:100%;
    height:0.6rem;
    background: #fff;
    bottom:0;
    display: flex;
    justify-content: space-around;
    li{
      line-height: 0.23rem;
      a{
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: 0 .2rem;
      }
    }
  }
  .active{
    color:orange;
  }
</style>
